<template>
  <div class="about" id="about" name="about">
    <div class="about-header">
      <div class="about-title">
        <i
          class="el-icon-chat-dot-square"
          style="color: rgb(207, 124, 124)"
        ></i>
        关于我们
      </div>
    </div>
    <div class="about-content">
      <h4 class="b">前言</h4>
      <p class="p">
        2021年，今年的新冠疫情没有那么严重了，我们现在在集训，集训的内容就是做项目，提高自己的专业知识。
        这个项目用到的有Vue.js等内容，这个项目前后端分离的。
      </p>
      <h4 class="b">说明</h4>
      <p class="p">
        本项目前后端分离，没有应用到商业当中去，纯属团队练习项目。
      </p>
      <p class="p">这个只是本项目的前端，后端不在这里。</p>
      <p class="p">已经部署到阿里云</p>
      <h4 class="b">项目简介</h4>
      <p class="p">
        本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios。
      </p>
      <p class="p">
        前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。
      </p>
      <p class="p">
        实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能
      </p>
      <p class="p">
        后端采取了MVC模式，根据前端需要的数据分模块设计了相应的接口、控制层、数据持久层。
      </p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.about {
  background-color: #f5f5f5;
  height: 1400px;
}
.about .about-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.about .about-header .about-title {
  width: 1225px;
  /* margin: 0 auto; */
  height: 64px;
  line-height: 64px;
  font-size: 28px;
}
.about .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.about .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}

.b {
  margin-left: 40px;
  font-size: 30px;
}
.p {
  margin-left: 40px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.466);
}
</style>